<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hover-Card</title>
  <style>
    *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .card-container{
      width: 100vw;
      height: 100vh;
      display: flex;
      flex-wrap: wrap;
      background-color: #262A35;
      justify-content: space-around;
      align-items: center;
      padding:20px;
    }
    .card-box{
      width: 40%;
      height: 250px;
      position: relative;
      background-color: #fff;
    }
    .card-box .img-box{
      width: 100%;
      height: 100%;
      position: absolute;
      top:0;
      left:0;
      background-color: rgba(0,0,0,.6);
      display: flex;
      justify-content: center;
      align-items: center;
      transition: all .6s ease-in-out;
      z-index: 999;
    }
    .card-box .img-box::before{
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      position: absolute;
      top:0;
      left:0;
      content: attr(data-text);
      font-size: 90px;
      font-weight: bold;
      color:rgba(255,255,255,.2);
      text-align: center;
      transition: all .6s ease-in-out;
    }
    .card-box .img-box>img{
      width: 150px;
      height: 150px;
      display: block;
    }
    .card-box:hover  .img-box {
      top:calc(50% - 75px);
      left: -75px;
      width: 150px;
      height: 150px;
      border-radius: 10px;
    }
    .card-box:hover .img-box::before{
      opacity: 0;
      font-size: 20px;
    }
    .card-box:hover  .img-box img{
      width: 60%;
      height: 60%;
    }
    .content-box{
      height: 100%;
      padding:20px 40px 20px 80px;
    }
    .content-box>h3{
      font-size: 40px;
      font-weight: bold;
    }
    .card-box:nth-of-type(1) .content-box>h3{
      color:var(--my-color1)
    }
    .card-box:nth-of-type(2) .content-box>h3{
      color:var(--my-color2)
    }
    .card-box:nth-of-type(3) .content-box>h3{
      color:var(--my-color3)
    }
    .card-box:nth-of-type(4) .content-box>h3{
      color:var(--my-color4)
    }
    .content-box>a{
      display: inline-block;
      color:#fff;
      padding:3px 5px;
      text-align: center;
      text-decoration: none;
      margin-top: 15px;
      background-color: #9FD4FD;
    }
  </style>
</head>
<body>
  <div class="card-container">
    <div class="card-box">
      <div class="img-box" data-text="MALL"><img src="./svg/shangcheng.svg" alt=""></div>
      <div class="content-box">
        <h3 style="--my-color1:#69C2F9">MALL</h3>
        <p class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque repudiandae velit distinctio ab! Aut, tempora. Dolor, distinctio. </p>
        <a href="">README</a>
      </div>
    </div>
    <div class="card-box">
      <div class="img-box" data-text="ORDER"><img src="./svg/dingdan.svg" alt=""></div>
      <div class="content-box">
        <h3 style="--my-color2:#F4B456">ORDER</h3>
        <p class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque repudiandae velit distinctio ab! Aut, tempora. Dolor, distinctio. </p>
        <a href="">README</a>
      </div>
    </div>
    <div class="card-box">
      <div class="img-box" data-text="BOARD"><img src="./svg/liuyanban.svg" alt=""></div>
      <div class="content-box">
        <h3 style="--my-color3:#4EDD92">BOARD</h3>
        <p class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque repudiandae velit distinctio ab! Aut, tempora. Dolor, distinctio. </p>
        <a href="">README</a>
      </div>
    </div>
   
    <div class="card-box">
      <div class="img-box" data-text="PURSE"> <img src="./svg/qianbao.svg" alt=""></div>
      <div class="content-box">
        <h3 style="--my-color4:#9022FF">PURSE</h3>
        <p class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque repudiandae velit distinctio ab! Aut, tempora. Dolor, distinctio. </p>
        <a href="">README</a>
      </div>
    </div>
  </div>
</body>
</html>